<template>
  <div>
    <!--经典面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日程管理</el-breadcrumb-item>
      <el-breadcrumb-item>日程信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- el-card-->
    <el-alert title="使用本功能应先选择日期" type="info" show-icon> </el-alert>
    <el-card>
      <!--声明一个使用提示-->

      <!-- 放个日期选择器 -->
      <el-date-picker
        v-model="datevalue"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <!-- 放入查询按钮-->
      <el-button
        type="primary"
        @click="GetDateList()"
        :disabled="datevalue === null"
      >
        点击查询
      </el-button>
      <div>
        <!--声明个表格-->
        <el-table :data="datelist" border style="width: 100%">
          <el-table-column type="index"> </el-table-column>
          <el-table-column
            prop="runtime"
            label="生效时间"
            width="180"
            :formatter="dateFormat"
          >
          </el-table-column>
          <el-table-column prop="title" label="日程名称" width="180">
          </el-table-column>
          <el-table-column prop="content" label="日程内容" width="180">
          </el-table-column>
          <el-table-column label="等级" width="180">
            <template slot-scope="scope">
              <el-button type="info" v-if="scope.row.level == 0">
                提示
              </el-button>
              <el-button type="primary" v-if="scope.row.level == 1">
                一般
              </el-button>
              <el-button type="warnning" v-if="scope.row.level == 2">
                重要
              </el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="190">
            <template slot-scope="scope">
              <!--修改按钮-->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="ShowEditDialog(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="DeleteDateListById(scope.row.id)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加日程选项卡-->
    <el-card>
      <el-collapse>
      <el-collapse-item title="点击这里添加日程" name="4">
         
         <el-form :model="addform" ref="addFormRef" label-width="70px">
          <el-form-item label="标题">
          <el-input v-model="addform.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="addform.content"></el-input>
        </el-form-item>
        <!--重要度选择器-->
        <el-form-item label="重要度">
          <!--放一个selcet-->
          <el-select v-model="addform.level" placeholder="请选择日程级别">
            <el-option label="提示" value=0></el-option>
            <el-option label="一般" value=1></el-option>
            <el-option label="重要" value=2></el-option>
          </el-select>
          
        </el-form-item>


        <el-form-item label="生效时间">
          <!-- 这放一个日期选择器-->
           <el-date-picker
      v-model="addform.runtime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

        </el-form-item> 
        </el-form>
       
      
        <el-button type="primary" @click="InsertNewdatelist">提 交</el-button>
     
    
  </el-collapse-item>
  </el-collapse>


    </el-card>
    <!--添加日程结束-->



    <!-- 声明编辑对话框-->
    <el-dialog
      title="公告信息修改"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 放置一个表单上去-->
      <el-form :model="editform" ref="editFormRef" label-width="70px">
        <el-form-item label="标题">
          <el-input v-model="editform.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="editform.content"></el-input>
        </el-form-item>
        <!--重要度选择器-->
        <el-form-item label="重要度">
          <!--放一个selcet-->
          <el-select v-model="editform.level" placeholder="请选择日程级别">
            <el-option label="提示" value=0></el-option>
            <el-option label="一般" value=1></el-option>
            <el-option label="重要" value=2></el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item label="生效时间">
          <!-- 这放一个日期选择器-->
           <el-date-picker
      v-model="editform.runtime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogClosed">取 消</el-button>
        <el-button type="primary" @click="Insertdatelist">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//对外暴露接口
export default {
  name: "DateManger",
  data() {
    return {
      datevalue: null,
      value : ['提示','一般','重要'],
      datelist: [],
      editDialogVisible: false,
      editform: {},
      addform:{},
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    GetDateList() {
      //把获取的时间格式化
      let StartTime = this.datevalue[0];
      let EndTime = this.datevalue[1];
      let StartTimeYear = StartTime.getFullYear();
      let StartTimeMonth = StartTime.getMonth() + 1;
      if (StartTimeMonth.toString().length == 1) {
        StartTimeMonth = "0" + StartTimeMonth;
      }

      let StartTimeDay = StartTime.getDate();
      if (StartTimeDay.toString().length == 1) {
        StartTimeDay = "0" + StartTimeDay;
      }
      let EndTimeYear = EndTime.getFullYear();
      let EndTimeMonth = EndTime.getMonth() + 1;
      if (EndTimeMonth.toString().length == 1) {
        EndTimeMonth = "0" + EndTimeMonth;
      }

      let EndTimeDay = EndTime.getDate();
      if (EndTimeDay.toString().length == 1) {
        EndTimeDay = "0" + EndTimeDay;
      }

      let that = this;
      let url = "api/GetDateListByDate";
      let data = {
        StartTimeYear: StartTimeYear.toString(),
        StartTimeMonth: StartTimeMonth,
        StartTimeDay: StartTimeDay,
        EndTimeYear: EndTimeYear.toString(),
        EndTimeMonth: EndTimeMonth,
        EndTimeDay: EndTimeDay
      };

      //发送信息
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if (code == 200) {
          that.$message.success(message);
          //将获取到的值赋给datelist
          that.datelist = data;
        } else {
          that.$message.error(message);
          that.datelist = [];
        }
      });
     
    },
    dateFormat(row, column) {
      let date = row[column.property];

      if (date === undefined) {
        return row[column.property];
      }
      let datetime = new Date(date).toLocaleDateString();

      return datetime;
    },
    DeleteDateListById(id) {
      let that = this;
      let url = "api/DeleteDateListById";
      let data = {
        id: id
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if (code == 200) {
          that.GetDateList();
          that.$message.success(message);

          that.IsSearch = true;
        } else {
          that.$message.error(message);
        }
      });
    },
    editDialogClosed() {
      this.editDialogVisible = false;
    },
    ShowEditDialog(id) {
      //去后端通过id要数据
      let that = this;
      let url = "api/GetDateListById";
      let data = {
        id: id
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if (code == 200) {
          //打开对话框
          that.editform = data;
          that.editform.level = that.value[that.editform.level]
          that.editDialogVisible = true;
        } else {
          that.$message.error(message);
        }
      });
    },
    //修改提交用函数
    Insertdatelist(){
      
      if(this.editform.level === "提示"){
        this.editform.level = 0
      }
      if(this.editform.level === "一般"){
        this.editform.level = 1
      }
      if(this.editform.level === "重要"){
         this.editform.level = 2
      }
      let that = this
      let url = "api/UpdateDateListById"
      let data = {
        title : this.editform.title,
        content : this.editform.content,
        runtime : this.editform.runtime,
        level:this.editform.level,
        id:this.editform.id
      }
      
       this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
          that.$message.success(message);
          that.GetDateList()
          that.editDialogClosed()
        } else {
          that.$message.error(message);
        }
      });
       

    },
    //添加用提交函数
   InsertNewdatelist(){
     let year = this.addform.runtime.getFullYear();
     let month = this.addform.runtime.getMonth()+1;
     if (month.toString().length == 1) {
       month = "0" + month;
      }
     let day = this.addform.runtime.getDate()
      if (day.toString().length == 1) {
        day = "0" +day;
      }
     let that = this;
     let url = "api/InsertDateList";
     let data = {
       year :year.toString(),
       month:month.toString(),
       day:day.toString(),
       title:this.addform.title,
       content:this.addform.content,
       level:this.addform.level,


     }

    this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if (code == 200) {
          that.$message.success(message);
         
        } else {
          that.$message.error(message);
          
        }
      });

   }
  }
};
</script>

<style scoped></style>
